<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./common/css/coommon.css" />
    <title>Document</title>
    <style>
      .body {
        height: 75.5vh;
        box-sizing: border-box !important;
      }
    </style>
  </head>

  <body>
    <div class="ghcj2" id="app">
      <div class="header">
        <div class="header-item">
          <p class="title">
            某某某某某某项目
            <span class="tag">持续</span>
          </p>
          <p>
            <span>项目类型</span>
            <span>软件项目</span>
          </p>
          <p>
            <span>售前经理</span>
            <span>XXX</span>
          </p>
          <p>
            <span>项目周期</span>
            <span>2022-08-20至2022-10-20</span>
          </p>
        </div>
        <div class="header-item">
          <div class="item-btn">
            <button class="button_info">立项申请</button>
            <button class="button_success_plain">完成/关闭</button>
          </div>
          <div class="item-btn">
            <button class="button_primary">&ensp;&ensp;返回&ensp;&ensp;</button>
            <button @click="show" class="button_primary_plain">自评进度</button>
            <button class="button_error">删除</button>
          </div>
        </div>
      </div>
      <div class="body">
        <div id="tabs" class="tabs">
          <div
            @click="jumpToPage(item)"
            class="tab-item"
            v-show="item.isShow"
            v-for="item in tabs"
          >
            {{ item.name}}
          </div>
        </div>
        <iframe
          id="iframe"
          class="level"
          name="dialog"
          :src="srcAction"
          frameborder="0"
          width="100%"
          height="100%"
          allowtransparency="true"
          style="background-color: transparent"
        ></iframe>
      </div>
      <div id="addDayReportBox4" style="height: 80vh"></div>
    </div>
  </body>
  <script src="./common/js/vue.js"></script>
  <script type="module">
    import { onMessage } from "./common/js/event.js";
    import Tabs from "./common/js/tabs.js";
    import DiaLog from "./common/js/diaLog.js";
    const { createApp } = Vue;
    let dialog = new DiaLog({
      title: "填写日报",
      width: "80% ",
      el: "#addDayReportBox4",
      zIndex: 100,
      cancel: () => {
        dialog.hide();
      },
      confirm: (document) => {
        dialog.hide();
      },
    });
    createApp({
      data() {
        return {
          srcAction: "./项目详情（测试）.html",
          tabs: [
            {
              src: "./项目详情（综合）.html",
              name: "综合",
              isShow: true,
            },
            {
              src: "./项目详情（售前）.html",
              name: "售前",
              isShow: true,
            },
            {
              src: "./项目详情（需求）.html",
              name: "需求",
              isShow: true,
            },
            {
              src: "./项目详情（关联）.html",
              name: "关联",
              isShow: true,
            },
            {
              src: "./项目详情（进度-任务拆解）.html",
              name: "进度",
              isShow: true,
            },
            {
              src: "./项目详情（测试）.html",
              name: "测试",
              isShow: true,
            },
            {
              src: "./项目详情（验收-产品验收）.html",
              name: "验收",
              isShow: true,
            },
            {
              src: "",
              name: "变更",
              isShow: true,
            },
            {
              // src: "./项目详情（进度-团队日报）.html",
              src: "./项目详情（团队）.html",
              name: "团队",
              isShow: true,
            },
            {
              src: "./项目详情（合同-采购合同）.html",
              name: "合同",
              isShow: true,
            },
            {
              src: "./项目详情（采购）.html",
              name: "采购",
              isShow: true,
            },
            {
              src: "./项目详情（记录）.html",
              name: "记录",
              isShow: true,
            },
          ],
        };
      },
      //页面初始化加载
      mounted() {
        onMessage((e) => {
          if (e.type == "page") {
            this.srcAction = e.src;
          }
        });
      },
      //所有函数都写在这里
      methods: {
        show() {
          dialog.show();
        },
        jumpToPage(item) {
          this.srcAction = item.src;
        },
      },
    }).mount("#app");

    let tabs = new Tabs({
      tabsEl: "#tabs",
      tabsItemEl: ".tab-item",
      index: 0,
      watch: ({ item, active, index, all, left }) => {
        all.forEach((item) => {
          item.style.color = "#4e5969";
        });
        all[index].style.color = "#3E7BFA";
        active.style.width = "42px";
        const { height, width } = active.getBoundingClientRect();
        active.style.left = left + (item.width - width) / 2 + "px";
        active.style.top = item.height - height + "px";
      },
    });
  </script>
</html>
